// import ProForm, { ProFormTextArea } from '@ant-design/pro-form';
import { BorderOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useState } from 'react';
import styles from './TooBar.less';

const ToolBar = (props) => {
  const { selectTool } = props;
  const [activeButton, setActiveButton] = useState('Text');

  const buttonList = [
    { value: 'Text', icon: <FormOutlined /> },
    { value: 'Line', icon: <EditOutlined /> },
    { value: 'Rectangle', icon: <BorderOutlined /> },
  ];

  const handleButtonClick = (buttonName) => {
    setActiveButton(buttonName);
    selectTool(buttonName);
  };

  return (
    <div className={styles.toolbar}>
      {buttonList.map((item) => {
        return (
          <Button
            key={item.value}
            className={activeButton === item.value ? styles.active : ''}
            onClick={() => handleButtonClick(item.value)}
            icon={item.icon}
          ></Button>
        );
      })}
    </div>
  );
};

export default ToolBar;
